import React, { Component } from 'react'
import {connect} from "react-redux"
import * as action from "../action"
import {bindActionCreators} from "redux"
import { AntOutline } from 'antd-mobile-icons'
import { Icon } from 'react-vant';
 class Home extends Component {
  componentDidMount(){
      
      this.props.getList() // 写redux三步走 1.组件里写this.props.action里的方法名
      // 2,去action里写getList这个方法
      // 3.写reducer
  }
  goDetail (item) { // 跳转详情得方法
        this.props.history.push({
            pathname:"/detail",
            state:{
                item
            }
        })
  }
  ondown () { // 商品列表降序
    this.props.onDown()
  }
  onup() {
    this.props.onUp() // this.props.action里的方法名
  }
  render() {
    return (
      <div>
          <span><AntOutline></AntOutline></span>
           <span onClick={this.ondown.bind(this)}> <Icon name="down" />  降序</span>
           <span onClick={this.onup.bind(this)}> <Icon name="upgrade" /> 升序</span>

        <hr />
         {
             this.props.arr &&  this.props.arr.length? this.props.arr.map((item,index)=>{
                return <div key={index} onClick={this.goDetail.bind(this,item)}>
                    <h4>{item.title}</h4>
                    <img src={item.img} alt="" />
                    <span>{item.price}</span>

                </div>
             }):"暂无数据"
         }
      </div>
    )
  }
}
const mapStateToProps = (state) => {
    return {
        ...state.shopReducer
    }
} // 快捷键rxm

const mapDispatchToProps = (dispatch)=>bindActionCreators(action,dispatch)
export default connect(mapStateToProps,mapDispatchToProps)(Home)